<script lang="ts" setup>
import { unref } from "vue";
import { omit } from "lodash-es";

import { ProForm } from "@package/form";
import useForm from "@/hooks/useForm";

import { TProFormProps } from "../type";

const props = defineProps<
  TProFormProps & {
    service: [string, any?];
  }
>();

const emits = defineEmits<{
  success: [e: any];
}>();

const { refForm, isFetching, model, onFetchResponse, submit, reset } = useForm(
  ...props.service
);

onFetchResponse(() => emits("success", unref(model)));

defineExpose({
  model,
  submit,
  reset,
});
</script>

<template>
  <ProForm
    ref="refForm"
    v-bind="(omit(props, ['servier']) as TProFormProps)"
    :loading="isFetching"
    :model="model"
    @submit="submit"
    @reset="reset"
    :footer="undefined"
  >
    <slot />
  </ProForm>
</template>
